<template>
	<div>
		<img :src="imageUrl" alt="" mode="widthFix" style="width: 100%;" />
		<l-painter ref="painter" @done="onsave" custom-style="position: fixed; left: 200%">
			<l-painter-view
				css="display:flex;flex-direction:column;align-items: center;justify-content: center;;background: #333; padding-top: 20rpx;border-color:#333;">
				<l-painter-image src="@/static/images/logo.jpg"
					css="width: 100rpx; height: 100rpx;border-radius: 50rpx;margin-bottom: 20rpx;" />
				<l-painter-text :text="str1"
					css="width:100%;text-align: center;color:#fff;font-size: 40rpx;font-weight: bold;" />
			</l-painter-view>
			<l-painter-view css="background: #333; padding-top: 20rpx;border-color:#333;">
				<l-painter-text :text="typeStr"
					css="width:100%;text-align: center;color:#547b44;font-size: 30rpx;font-weight: bold;" />
			</l-painter-view css="">
			<!-- 球队 -->
			<l-painter-view css="background: #333; padding-top: 20rpx;">
				<l-painter-view css="display:flex;padding: 20rpx 0 30rpx 0;background: #fff;">
					<!-- one -->
					<l-painter-view css="position: relativedisplay:flex;flex-direction:column;width:44%;">
						<l-painter-view css="display:flex;align-items: center;justify-content: center;width: 100%;">
							<l-painter-image
								:src="homeTeamLogo ? imageUrlIcon + homeTeamLogo :'@/static/images/logo.jpg'"
								css="width: 100rpx; height: 100rpx;border-radius: 50rpx;" />
							<l-painter-text :text="homeTeamScore"
								css="color:red;text-align: center;font-size: 60rpx;font-weight:bold;position: absolute;top:20rpx;right:0" />
						</l-painter-view>


						<l-painter-text :text="homeTeamName"
							css="width:100%;text-align: center;color: #000;margin-top: 20rpx;" />
					</l-painter-view>
					<!-- line -->
					<l-painter-view css="display:flex;flex-direction:column;width:12%;padding-top:40rpx;">
						<l-painter-text text="-" css="width:100%;text-align: center;color: #000;" />
					</l-painter-view>
					<!-- two -->
					<l-painter-view css="width:44%;">
						<l-painter-view
							css="position: relative;display:flex;align-items: center;justify-content: center;width: 100%;">
							<l-painter-text :text="awayTeamScore"
								css="color:#000;text-align: center;font-size: 60rpx;font-weight:bold;position: absolute;top:20rpx;" />
							<l-painter-image
								:src="awayTeamLogo ? imageUrlIcon + awayTeamLogo :'@/static/images/logo.jpg'"
								css="width: 100rpx; height: 100rpx;border-radius: 50rpx;" />
						</l-painter-view>
						<l-painter-text :text="awayTeamName"
							css="width:100%;text-align: center;color: #000;margin-top: 20rpx;" />
					</l-painter-view>
					<!-- 最佳 -->

				</l-painter-view>
				<l-painter-view css="background:#fff;padding: 20rpx 0;">
					<l-painter-text text="最佳球员" css="width:100%;text-align: center;color:#000;font-size: 30rpx;" />
				</l-painter-view>
				<!-- 最佳 -->
				<l-painter-view css="display:flex;width: 100%;background: #fff">
					<l-painter-view css="width: 50%;display:flex;flex-direction:column;justify-content: center;">
						<l-painter-view
							css="display:flex;justify-content: space-between;margin-top:30rpx;position: relative;"
							v-for="(item,index) in bestOfTheGameOne">
							<l-painter-view
								css="flex-direction:column;display:flex;justify-content: center;align-items: center;padding-left:30rpx;">
								<l-painter-image css="width: 80rpx;height:80rpx;border-radius: 40rpx;"
									:src="item.profilePicture ? imageUrlIcon + item.profilePicture :'@/static/user.jpg'" />
								<l-painter-text css="font-size:26rpx;margin-top:10prx;" :text="item.playerName" />
							</l-painter-view>
							<l-painter-view css="display:flex;align-items: center;padding-right:10rpx;">
								<l-painter-text css="font-size: 50rpx;color:red;font-weight:bold;margin-right: 20rpx;"
									:text="item.totalCount" />
								<l-painter-view css="width:40rpx;height: 90rpx;display:flex;align-items: flex-end">
									<l-painter-view :css="`height:${getHeight(item, index)}%;background:#a71919;`">

									</l-painter-view>
								</l-painter-view>
							</l-painter-view>
							<l-painter-text
								css="font-size: 20rpx;color:#333;font-weight:bold;margin-right: 20rpx;position: absolute;bottom:-6px;right:-34rpx;"
								:text="typeList[index]" />
						</l-painter-view>
					</l-painter-view>
					<!-- two -->
					<l-painter-view css="width: 50%;display:flex;flex-direction:column;padding-bottom:30rpx;">
						<l-painter-view css="display:flex;justify-content: space-between;margin-top:30rpx;"
							v-for="(item,index) in bestOfTheGameTwo">
							<l-painter-view css="display:flex;align-items: center;padding-left:10rpx;">
								<l-painter-view css="width:40rpx;height: 90rpx;display:flex;align-items: flex-end">
									<l-painter-view :css="`height:${getHeight(item, index)}%;background:#0808a3;`">

									</l-painter-view>
								</l-painter-view>
								<l-painter-text
									css="font-size: 50rpx;color:#0808a3;font-weight:bold;margin-left: 20rpx;"
									:text="item.totalCount" />

							</l-painter-view>
							<l-painter-view
								css="flex-direction:column;display:flex;justify-content: center;align-items: center;padding-right:30rpx;">
								<l-painter-image css="width: 80rpx;height:80rpx;border-radius: 40rpx;"
									:src="item.profilePicture ? imageUrlIcon + item.profilePicture :'@/static/user.jpg'" />
								<l-painter-text css="font-size:26rpx;" :text="item.playerName" />
							</l-painter-view>
						</l-painter-view>
					</l-painter-view>
				</l-painter-view>
				<!-- 比赛统计 -->
				<l-painter-view css="background:#fff;padding: 20rpx 0;margin-top:20rpx;width:100%">
					<l-painter-text text="比赛统计" css="width:100%;text-align: center;color:#000;font-size: 30rpx;" />
				</l-painter-view>
				<l-painter-view css="padding: 10rpx;background: #fff;;width:100%">
					<l-painter-view css="display:flex;font-size: 24rpx;padding:10rpx 0;border-bottom: 1px solid #ddd;">
						<l-painter-text v-for="(item,index) in teamOne.teamSubsectionScoreSumTitle" css="text-align:
							center;flex:1">
							{{item}}
						</l-painter-text>
					</l-painter-view>
					<l-painter-view css="display:flex;font-size: 24rpx;padding:10rpx 0;">
						<l-painter-text :text="teamOne.teamName" css="text-align: center;flex:1;margin-bottom:20rpx;" />
						<l-painter-text v-for="item in teamOneScoresAsString" :text="item"
							css="flex: 1;text-align: center;font-weight: bold;" />
						<l-painter-text v-if="teamOne.teamSubsectionScoreSum && !teamOne.teamSubsectionScoreSum.length"
							:text="teamOne.teamSubsectionScoreSumTotal"
							css="flex: 1;text-align: center;font-weight: bold;" />
					</l-painter-view>
					<l-painter-view css="display:flex;font-size: 24rpx;padding:10rpx 0;">
						<l-painter-text :text="teamTwo.teamName" css="text-align: center;flex:1;margin-bottom:10rpx;" />
						<l-painter-text v-for="item in teamTwoScoresAsString" :text="item"
							css="flex: 1;text-align: center;font-weight: bold;" />
						<l-painter-text v-if="teamTwo.teamSubsectionScoreSum && !teamTwo.teamSubsectionScoreSum.length"
							:text="teamTwo.teamSubsectionScoreSumTotal"
							css="flex: 1;text-align: center;font-weight: bold;" />
					</l-painter-view>
				</l-painter-view>
				<!-- 球队统计 -->
				<l-painter-view css="background:#fff;padding: 20rpx 0;margin-top:20rpx;">
					<l-painter-text text="球队统计" css="width:100%;text-align: center;color:#000;font-size: 30rpx;" />
				</l-painter-view>
				<l-painter-view css="padding: 10rpx 20rpx;  box-sizing: border-box;background: #fff">
					<l-painter-view v-for="(item, key) in teamCompareOne">
						<l-painter-text css="font-size: 24rpx;text-align: center;width:100%;" :text="defenTong[key]" />


						<l-painter-view
							css="display:flex;align-items: center;width:50%;padding: 10rpx; justify-content: space-between; box-sizing: border-box;">
							<l-painter-text css="font-size: 24rpx;width:10%;font-weight: bold;"
								:text="teamCompareOne[key] || '0'" />
							<l-painter-view css="width: 80%;background: #ddd;height:10rpx;    position: relative;">
								<l-painter-view
									:css="`width:${getSourceFen(teamCompareOne[key], key)}%;height:10rpx;background: red;    position: absolute;right:0;`"></l-painter-view>
							</l-painter-view>
						</l-painter-view>
						<l-painter-view
							css="display:flex;align-items: center;width:50%;padding: 10rpx;    justify-content: space-between;  box-sizing: border-box;">
							<l-painter-view
								css="width: 80%;background: #ddd;height:10rpx;display:flex;align-items: flex-end;justify-content: flex-start;">
								<l-painter-view
									:css="`width:${getSourceFen(teamCompareTwo[key], key)}%;height:10rpx;background: blue;`"></l-painter-view>
							</l-painter-view>
							<l-painter-text css="font-size: 24rpx;width:10%;font-weight: bold;"
								:text="teamCompareTwo[key] || '0'" />
						</l-painter-view>
					</l-painter-view>
				</l-painter-view>

				<!-- A -->
				<l-painter-view css="background:#fff;padding: 20rpx 0;margin-top:20rpx;">
					<l-painter-text :text="`球员统计-${homeTeamName}`"
						css="width:100%;text-align: center;color:#000;font-size: 30rpx;" />
				</l-painter-view>
				<l-painter-view css="display:flex;background: #fff;padding: 10rpx 16rpx">
					<l-painter-text text="球员" :css="`width:14%;font-size:24rpx;text-align:center;`" />
					<l-painter-text text="得分" :css="`width:7%;font-size:24rpx;text-align:left;`" />
					<l-painter-text v-for="(item,key) in commomText"
						:css="`width:${getWidth()}%;font-size:24rpx;text-align:center;`" :text="item" />
				</l-painter-view>
				<l-painter-view css="background: #fff">
					<l-painter-view v-for="(item,index) in realTimeDataTeamOneResp" css="display:flex;padding: 10rpx">
						<l-painter-text
							:css="`width:14%;font-size:18rpx;text-align:center;font-weight: bold;white-space:nowrap`"
							:text="index==realTimeDataTeamOneResp.length-1?item.name: item.code + '/' + item.name" />
						<l-painter-text :css="`width:6%;font-size:22rpx;text-align:center;font-weight: bold;`"
							:text="item.typeScoreSum || '0'" />
						<l-painter-text v-for="(child, key) in commomText"
							:css="`width:${getWidth()}%;font-size:22rpx;text-align:center;font-weight: bold;`"
							:text="getUserSource(key, item.typeMapList)" />
					</l-painter-view>
				</l-painter-view>
				<!-- b -->
				<l-painter-view css="background:#fff;padding: 20rpx 0;margin-top:20rpx;">
					<l-painter-text :text="`球员统计-${awayTeamName}`"
						css="width:100%;text-align: center;color:#000;font-size: 30rpx;" />
				</l-painter-view>
				<l-painter-view css="display:flex;background: #fff;padding: 10rpx 16rpx;">
					<l-painter-text text="球员" :css="`width:14%;font-size:24rpx;text-align:center;`" />
					<l-painter-text text="得分" :css="`width:7%;font-size:24rpx;text-align:left;`" />
					<l-painter-text v-for="(item,key) in commomText"
						:css="`width:${getWidth()}%;font-size:24rpx;text-align:center;`" :text="item" />
				</l-painter-view>
				<l-painter-view css="background: #fff">
					<l-painter-view v-for="(item,index) in realTimeDataTeamTwoResp" css="display:flex;padding: 10rpx">
						<l-painter-text
							:css="`width:14%;font-size:18rpx;text-align:center;font-weight: bold;white-space:nowrap`"
							:text="index==realTimeDataTeamTwoResp.length-1?item.name: item.code + '/' + item.name" />
						<l-painter-text :css="`width:6%;font-size:22rpx;text-align:center;font-weight: bold;`"
							:text="item.typeScoreSum || '0'" />
						<l-painter-text v-for="(child, key) in commomText"
							:css="`width:${getWidth()}%;font-size:22rpx;text-align:center;font-weight: bold;`"
							:text="getUserSource(key, item.typeMapList)" />
					</l-painter-view>
				</l-painter-view>



				<l-painter-view css="background:#fff;padding: 40rpx; 20rpx;margin-top: 30rpx;">
					<l-painter-view css="display: felx;flex-direction: column;padding: 0 40rpx;">
						<l-painter-view css="background:#fff;padding: 20rpx;">
							<l-painter-qrcode text="http://m.yundongshugenmatch.cn"
								css="width: 200rpx; height: 200rpx;background:#fff;" />
						</l-painter-view>

					</l-painter-view>
					<l-painter-view
						css="width: 320rpx;display: felx;flex-direction: column;justify-content:center;align-items:center;">
						<l-painter-view css="display:flex;">
							<l-painter-image src="@/static/logos.c5d75d8.png"
								css="width: 100%; height: 140rpx;border-radius: 50rpx;margin-bottom: 20rpx;" />
						</l-painter-view>
						<l-painter-text css="color:#000;font-size: 24rpx;text-align: center;width:100%;"
							text="为运动而生 以数据为根本" />
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
	</div>
</template>

<script>
	import {
		getImgCanva
	} from '@/api/tournament/index.js'
	import {
		imageUrl,
		baseUrl
	} from '@/config.js'
	export default {
		data() {
			return {
				// imageUrlIcon: imageUrl,
				imageUrlIcon: baseUrl + '/system/oss/preview/',
				tongjiText: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7', 'Q8'],
				teamOne: {},
				teamTwo: {},
				bestOfTheGameOne: [],
				bestOfTheGameTwo: [],
				defenTong: {
					'yf': '一分',
					"lb": '篮板',
					"ef": '二分',
					"sf": '三分',
					"fq": '罚球',
					"gm": '盖帽',
					"zg": '助攻',
					"qd": '抢断',
					"fg": '犯规'
				},
				teamCompareOne: {},
				teamCompareTwo: {},
				commomText: {},
				realTimeDataTeamOneResp: [],
				realTimeDataTeamTwoResp: [],
				typeStr: '',
				imageUrl: '',
				str1: '',
				typeList: ['得分', '篮板', '助攻'],
				awayTeamLogo: '',
				homeTeamLogo: '',
				homeTeamName: '',
				awayTeamName: '',
				awayTeamScore: '',
				homeTeamScore: ''
			}
		},
		methods: {
			onsave() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'base64',
					quality: 1,
					success: (res) => {
						console.log('数据res', res.tempFilePath);
						this.imageUrl = res.tempFilePath
					},
				});
			},
			getUserSource(key, list) {
				let data = list.find(item => item.type == key);
				let other;
				if (key == 1) {
					other = list.find(item => item.type == 5);
					return data.typeCount + '/' + (other.typeCount + data.typeCount)
				}
				if (key == 14) {
					other = list.find(item => item.type == 16);
					return data.typeCount + '/' + (other.typeCount + data.typeCount)
				}
				if (key == 2) {
					other = list.find(item => item.type == 6);
					return data.typeCount + '/' + (other.typeCount + data.typeCount)
				}
				return data.typeCount || '0'
			},
			getWidth() {
				return 100 / 11;
			},
			getSourceFen(item, key) {
				let source1 = this.teamCompareOne[key]
				let source2 = this.teamCompareTwo[key]

				let widthNum = (item / (source1 + source2)) * 100

				return widthNum == 0 ? 0.01 : widthNum;

			},
			getHeight(item, index) {
				let bigSource = this.bestOfTheGameOne[index].totalCount > this.bestOfTheGameTwo[index].totalCount ? this
					.bestOfTheGameOne[index].totalCount : this.bestOfTheGameTwo[index].totalCount;
				let indexSource = (item.totalCount / bigSource) * 100;
				return indexSource;

			},
		},
		computed: {
			teamOneScoresAsString() {
				return Object.values(this.teamOne.teamSubsectionScoreSum).map(String);
			},
			teamTwoScoresAsString() {
				return Object.values(this.teamTwo.teamSubsectionScoreSum).map(String);
			},
		},
		onLoad({
			id
		}) {
			getImgCanva(id).then(res => {
				let {
					realTimeData: {
						mapList
					}
				} = res;
				let {
					bestOfTheGame: {
						oneTeamList,
						twoTeamList
					}
				} = res;
				let {
					teamCompare: {
						oneTeam,
						twoTeam
					}
				} = res;
				let {
					realTimeDataTeamOneResp,
					realTimeDataTeamTwoResp
				} = res

				this.teamOne = mapList[0];
				this.teamTwo = mapList[1];
				let teamOneLength = this.teamOne.teamSubsectionScoreSum
				console.log(teamOneLength, "------teamOne")
				const getObjectLength = (teamOneLength) => {
					return Object.keys(teamOneLength).length;
				};
				this.teamOne.teamSubsectionScoreSumTitle = ['球队', ...this.tongjiText.slice(0, getObjectLength(
					teamOneLength)), '总分']
				console.log(this.teamOne.teamSubsectionScoreSumTitle, "-------", this.tongjiText)
				this.bestOfTheGameOne = oneTeamList;
				this.bestOfTheGameTwo = twoTeamList;
				this.teamCompareOne = oneTeam;
				this.teamCompareTwo = twoTeam;
				console.log('realTimeDataTeamOneResp数据', realTimeDataTeamOneResp);
				// realTimeDataTeamOneResp.push({
				// 	basketballPlayerId: 5777,
				// 	code: "23",
				// 	name: "合计",
				// 	typeScoreSum: 5,
				// 	typeMapList: [{
				// 		type: 1,
				// 		typeCount: 0,
				// 		typeStr: "二分命中"
				// 	}]
				// })
				this.realTimeDataTeamOneResp = realTimeDataTeamOneResp;
				this.realTimeDataTeamTwoResp = realTimeDataTeamTwoResp
				let scoringWay = res.scoringWay
				this.scoringWay = scoringWay;
				if (scoringWay == 0) {
					this.commomText = {
						1: '二分',
						2: '三分',
						3: '盖帽',
						4: '抢断',
						9: '篮板',
						8: '助攻',
						11: '犯规',
						15: '罚球',
						10: '失误'
					}
				} else {
					this.commomText = {
						14: '一分',
						1: '二分',
						3: '盖帽',
						4: '抢断',
						9: '篮板',
						8: '助攻',
						11: '犯规',
						15: '罚球',
						10: '失误'
					}
				}
				this.str1 = res.str1
				this.typeStr = res.typeStr
				this.awayTeamLogo = res.awayTeamLogo;
				this.homeTeamLogo = res.homeTeamLogo
				this.awayTeamName = res.awayTeamName;
				this.homeTeamName = res.homeTeamName;
				this.awayTeamScore = res.awayTeamScore;
				this.homeTeamScore = res.homeTeamScore
			})
		}
	}
</script>

<style>
</style>